<template>
  <div class="likeView" v-if="userLike">
    <header>
      <div @click="$router.back()" class="left"></div>
      <p>我的收藏</p>
      <div class="btn" @click="isChange = !isChange" v-show="userLike.length">
        {{ isChange ? "完成" : "编辑" }}
      </div>
    </header>

    <div class="content">
      <div
        :to="'/details?id=' + vl.id"
        tag="div"
        :class="['item', { on: isChange }]"
        v-for="(vl, i) in userLike"
        :key="i"
      >
        <div
          :class="['toggle', { con: vl.checked }]"
          @click="toggle(vl.id)"
        ></div>

        <router-link tag="div" :to="'/details?id=' + vl.id" class="img">
          <img :src="vl.imgUrl" alt="" />
        </router-link>

        <router-link tag="div" :to="'/details?id=' + vl.id" class="text">
          <div class="title txt-cut">
            {{ vl.title }}
          </div>
          <div class="price">￥{{ vl.price }}.00</div>
        </router-link>
      </div>
    </div>

    <div class="bottom" v-show="userLike.length && isChange">
      <div class="left">
        <div :class="['toggleAll', { con: toggleAll }]" @click="All"></div>
        <span>全选</span>
      </div>
      <div class="btn" @click="clear">删除选中商品</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChange: false,
      userLike: null,
      userInfo: null,
    };
  },
  methods: {
    // 获取用户数据
    getUserInfoFun() {
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      let user = localStorage.getItem("HL_user");
      if (user) {
        this.userLike = this.userInfo[user].like;
      }
    },
    // 修改本地数据
    setItem(item, newItem) {
      sessionStorage.setItem(item, JSON.stringify(newItem));
    },
    // 单选
    toggle(id) {
      let index = this.userLike.findIndex((vl) => vl.id == id);
      this.userLike[index].checked = !this.userLike[index].checked;
    },
    // 全选
    All() {
      this.toggleAll = !this.toggleAll;
    },
    // 清除已选
    clear() {
      let user = localStorage.getItem("HL_user");
      this.userInfo[user].like = this.userInfo[user].like.filter(
        (vl) => !vl.checked
      );
      this.userLike = this.userInfo[user].like;
      console.log(this.userInfo);
      this.setItem("userInfo", this.userInfo);
    },
  },
  created() {
    this.getUserInfoFun();
  },
  computed: {
    toggleAll: {
      get() {
        return this.userLike.every((vl) => vl.checked);
      },
      set(vl) {
        this.userLike.forEach((item) => (item.checked = vl));
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.likeView {
  > header {
    > .btn {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 13px;
      color: #cb3341;
    }
  }

  > .content {
    > .item {
      display: flex;
      padding: 30px 30px 22px 25px;
      align-items: center;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background: #ccc;
        left: 0;
        bottom: 0;
        transform: scaleY(0.5);
      }

      &.on .toggle {
        width: 18px;
        margin-right: 20px;
      }

      > .toggle {
        width: 0px;
        height: 18px;
        display: flex;
        background: url(http://www.hlamall.cn/img/mobile-site/collect/pay-state.png)
          no-repeat -18px 0px;
        background-size: cover;
        margin-right: 0px;
        transition: margin, width 0.5s;

        &.con {
          background-position: 0 0;
        }
      }

      > .img {
        width: 85px;
        height: 85px;
        margin-right: 40px;

        > img {
          width: 100%;
        }
      }

      > .text {
        align-self: start;
        flex: 1;
        display: flex;
        padding-top: 6px;
        flex-direction: column;
        justify-content: space-between;
        font-size: 13px;

        > .title {
          height: 32px;
          line-height: 16px;
        }

        > .price {
          height: 35px;
          margin-top: 10px;
          line-height: 35px;
          color: #c2343d;
          font-weight: bold;
        }
      }
    }
  }

  > .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    bottom: 65px;

    > .left {
      display: flex;
      font-size: 14px;

      > .toggleAll {
        width: 18px;
        height: 18px;
        display: flex;
        background: url(http://www.hlamall.cn/img/mobile-site/collect/pay-state.png)
          no-repeat -18px 0px;
        background-size: cover;
        margin: 0 10px;

        &.con {
          background-position: 0 0;
        }
      }
    }

    > .btn {
      height: 45px;
      width: 100px;
      line-height: 45px;
      text-align: center;
      background: #b40510;
      color: #fff;
    }
  }
}
</style>